---
title: 从 Hugo 迁移
description: 将现有的 Hugo 项目迁移到 Astro 的提示
sidebar:
  label: Hugo
type: migration
stub: true
framework: Hugo
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import { LinkCard, CardGrid } from '@astrojs/starlight/components';

[Hugo](https://gohugo.io) 是一个基于 Go 的开源静态站点生成器。

## Hugo 和 Astro 的主要相似之处

Hugo 和 Astro 有一些相似之处，可以帮助你迁移项目：

- Hugo 和 Astro 都是现代静态站点生成器，非常适合于像博客这样以[内容驱动的网站](/zh-cn/concepts/why-astro/#内容驱动)。

- Hugo 和 Astro 都允许你在 [Markdown 中编写内容](/zh-cn/guides/markdown-content/)。然而，Hugo 包含了几个特殊的 frontmatter 属性，并允许你使用 YAML、TOML 或 JSON 编写 frontmatter。尽管许多现有的 Hugo frontmatter 属性在 Astro 中并不生效，但你也可以继续使用现有的 Markdown 文件和 YAML（或 TOML）frontmatter 值。

- Hugo 和 Astro 都允许你使用各种[集成和外部包](https://astro.build/integrations/)来增强你的站点。

## Hugo 和 Astro 的主要区别

当你在 Astro 中重建 Hugo 网站时，你会注意到一些重要的差异：

- Hugo 使用 Go 模板来制作页面模板，而 [Astro 语法](/zh-cn/basics/astro-components/)则是一个类似 JSX 的 HTML 超集。

- Astro 不为标准 Markdown 文件中的动态内容使用短代码，但是 [Astro 的 MDX 集成](/zh-cn/guides/integrations-guide/mdx/)确实允许你在 MDX 文件中使用 JSX 和导入组件。

- Hugo可以为可重用的布局元素使用“partials”，而 [Astro 则完全基于组件](/zh-cn/basics/astro-components/)。任何 `.Astro` 文件都可以是组件、布局或整个页面，并且可以导入和渲染任何其他 Astro 组件。Astro 组件还可以包括[其他 UI 框架组件（如 React，Svelte，Vue，Solid）](/zh-cn/guides/framework-components/) 以及[项目中其他文件](/zh-cn/guides/imports/)的内容和数据, 如 Markdown 或 MDX。

## 从 Hugo 切换到 Astro

要将 Hugo 博客转换为 Astro，请从博客主题入门模板开始，或者在[主题展示](https://astro.build/themes/)中探索更多社区博客主题。

你可以向 `create astro` 命令传递 `--template` 参数，以使用我们的官方启动器之一启动新的 `Astro` 项目。或者你可以在 [从 GitHub 上任何现有的 Astro 存储库启动一个新项目](/zh-cn/install-and-setup/#通过-cli-向导安装)。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm create astro@latest -- --template blog
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm create astro@latest --template blog
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn create astro --template blog
  ```
  </Fragment>
</PackageManagerTabs>

将你现有的 Markdown（或 MDX，通过我们的可选集成）文件作为[创建 Markdown 或 MDX 页面的内容](/zh-cn/guides/markdown-content/)。Astro 允许在这些文件中使用 YAML 或 TOML frontmatter，因此如果你正在使用 JSON frontmatter，则需要对其进行转换。

要继续在 Markdown 内容中使用动态内容，如变量、表达式或 UI 组件，请添加 Astro 的可选 MDX 集成并将现有的 Markdown 文件转换为 [MDX 页面](/zh-cn/guides/markdown-content/)。MDX 支持 YAML 以及 TOML frontmatter，所以你可以保留你现有的 frontmatter 属性。但是你必须用 [MDX 自己的语法](https://mdxjs.com/docs/what-is-mdx/#mdx-syntax)替换任何 shortcode 语法，它允许 JSX 表达式或组件导入。

要转换其他类型的网站，如作品集或文档网站，请参阅 [astro.new](https://astro.new) 上的更多官方入门模板。你会找到每个项目的 GitHub 仓库的链接，以及在 IDX、StackBlitz、CodeSandbox 和 Gitpod 在线开发环境中一键打打开一个工作项目的链接。

## 社区资源

<CardGrid>

  <LinkCard title="Elio Struyf 从 Hugo 到 Astro 的迁移故事" href="https://www.eliostruyf.com/migration-story-hugo-astro/"/>

  <LinkCard title="Hugo Vs Astro - 2023 年选择哪个静态站点生成器" href="https://onebite.dev/hugo-vs-astro-which-static-site-generator-to-choose-in-2023/"/>

  <LinkCard title="AI 辅助迁移至 Astro 的经验教训" href="https://bennet.org/blog/lessons-from-ai-assisted-migration-to-astro/" />

</CardGrid>

:::note[有想要分享的资源吗？]
如果你找到（或制作）了一个关于将 Hugo 网站转换为 Astro 的有用的视频或博客文章，请将其 [添加到这个列表中](https://github.com/withastro/docs/edit/main/src/content/docs/en/guides/migrate-to-astro/from-hugo.mdx)！
:::
